<div class="main-container">

  <div nz-row nzGutter="12">
    <div nz-col class="gutter-row" nzSpan="24">
      <div class="gutter-box">
        <nz-card [nzBordered]="false">
          <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
            <nz-form-item>
              <nz-form-label>关键词</nz-form-label>
              <nz-form-control>
                <input formControlName="name" nz-input placeholder="关键词"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-control>
                <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
                <button nz-button (click)="onAdd()" style="margin-left: 10px">新增</button>
                <button
                  nz-button
                  nzType="default"
                  [disabled]="delDisable"
                  nz-popconfirm
                  nzPopconfirmTitle="确认删除勾选吗？"
                  (nzOnConfirm)="onDeleteAll()" style="margin-left: 10px">删除</button>
                <button nz-button nzType="danger" style="margin-left: 10px">考核跟踪</button>
              </nz-form-control>
            </nz-form-item>
          </form>
        </nz-card>

        <nz-card [nzBordered]="false">
          <nz-table
            #rowSelectionTable
            nzSize="middle"
            nzShowPagination
            nzShowSizeChanger
            [nzData]="listOfAllData"
            (nzCurrentPageDataChange)="currentPageDataChange($event)">
            <thead>
            <tr>
              <th
                nzWidth="62px"
                nzShowCheckbox
                [(nzChecked)]="allChecked"
                [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="checkAll($event)"
              ></th>
              <th>考核机构名称</th>
              <th>地址</th>
              <th>负责人</th>
              <th>电话</th>
              <th>灌区面积</th>
              <th>所辖管理所数量</th>
              <th>所辖渠道数量</th>
              <th>备注</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of rowSelectionTable.data">
              <td nzShowCheckbox
                  [(nzChecked)]="mapOfCheckedId[data.id]"
                  (nzCheckedChange)="refreshStatus()">
              </td>
              <td>{{ data.name }}</td>
              <td>{{ data.address }}</td>
              <td>{{ data.chargeman }}</td>
              <td>{{ data.phone }}</td>
              <td>{{ data.area }}</td>
              <td>{{ data.officeAccount }}</td>
              <td>{{ data.channelAccount }}</td>
              <td>{{ data.remark }}</td>
              <td>
                <a (click)="openEditModal(data)">修改</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a nz-popconfirm nzPopconfirmTitle="确认删除？" nzPopconfirmPlacement="left"
                   (nzOnConfirm)="onDelete(data.id)">
                  删除
                </a>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </nz-card>
      </div>

    </div>

  </div>

  <nz-modal [nzBodyStyle]="nzBodyStyle" nzWidth="700" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
            (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
    <form nz-form [formGroup]="form">
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">考核对象名称</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="name" placeholder="考核对象名称">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">地址</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="address" placeholder="地址">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">负责人</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="chargeman" placeholder="负责人">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">所辖管理所数量</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="officeAccount" placeholder="所辖管理所数量">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">所辖渠道数量</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="channelAccount" placeholder="所辖渠道数量">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">行政区划</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="xzqh" placeholder="行政区划">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">电话</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="phone" placeholder="电话">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">灌区面积</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="area" placeholder="灌区面积">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">备注</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="remark" placeholder="备注">
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </nz-modal>
</div>
